<template>
  <div id="app">
    <router-view/>
  <!-- 等待蒙板 -->
    <div id="wait_page" style="display:none" @click="hideWaitPage">
      <i class="iconfont iconloading" ></i>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods:{
    hideWaitPage(){
      document.getElementById('wait_page').style.display='none';
    }
  },
  mounted(){
    
  }
}
</script>

<style lang="scss">
//设置material design
$primary_color:#5e48fa;
$accent_color:#CC0066;

@import "~vue-material/dist/theme/engine"; // Import the theme engine

@include md-register-theme("default", (
  primary:$primary_color, // The primary color of your application
  accent: $accent_color, // The accent or secondary color
  theme: light // This can be dark or light
));

@import "~vue-material/dist/theme/all";

#app {  
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
   width: 100%;
  
   position: absolute;
   background-color: white;}

//等待页面
@keyframes rotateIcon{
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

#wait_page{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.3);
  >.iconfont{
    animation: rotateIcon 1s linear 0s infinite normal;
    font-size:80px;
  
  color: white;
  }
}

@import "~@/assets/scss/common.scss";
</style>
